<template>
  <div class="coming-soon">
    <h2>当前服务器时间</h2>
    <div class="timer">
      <el-row :gutter="20">
        <el-col :span="4">
          <div class="years-wrapper">
            <span class="years">{{ currentTime.getFullYear() }}</span>
            <br />年
          </div>
        </el-col>
        <el-col :span="4">
          <div class="months-wrapper">
            <span class="months">{{ currentTime.getMonth() + 1 }}</span>
            <br />月
          </div>
        </el-col>
        <el-col :span="4">
          <div class="days-wrapper">
            <span class="days">{{ currentTime.getDate() }}</span>
            <br />日
          </div>
        </el-col>
        <el-col :span="4">
          <div class="hours-wrapper">
            <span class="hours">{{ currentTime.getHours() }}</span>
            <br />时
          </div>
        </el-col>
        <el-col :span="4">
          <div class="minutes-wrapper">
            <span class="minutes">{{ currentTime.getMinutes() }}</span>
            <br />分
          </div>
        </el-col>
        <el-col :span="4">
          <div class="seconds-wrapper">
            <span class="seconds">{{ currentTime.getSeconds() }}</span>
            <br />秒
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

  <div class="actions">
    <el-button type="primary" :disabled=clockInStatus @click="clockIn">上班打卡</el-button>
    <el-button type="primary" :disabled=clockOutStatus @click="clockOut">下班打卡</el-button>
    <el-button type="primary" @click="router.push('/retrospective')">补签</el-button>
  </div>

  <el-table :data="attendance" style="width: 100%">
    <el-table-column prop="employeeName" label="打卡人" />
    <el-table-column prop="department" label="部门" />
    <el-table-column prop="checkInTime" label="上班时间" />
    <el-table-column prop="checkOutTime" label="下班时间" />
  </el-table>
</template>

<script name='Attend' setup lang='ts'>
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { useEmpStore } from '../store/emp';
import { addAttend, getAttend } from '../api';
import type { Attendance } from '../model';
import { ElMessage } from 'element-plus';


const router = useRouter();
const currentTime = ref(new Date());
let { empInfo } = useEmpStore();
let timer;
const clockInStatus = ref(false);
const clockOutStatus = ref(true);
let startTime = ref(new Date('2025-01-15'));
let endTime = ref(new Date('2025-01-16'));
let startDate = ref(startTime.value.toISOString());
let endDate = ref(endTime.value.toISOString());
let type = ref(1);

let attendance = ref<Attendance[]>([{
  id: 0,
  employeeName: '',
  department: '',
  date: '',
  checkInTime: '',
  checkOutTime: '',
  status: 0
}])

function clockIn() {
  type.value = 1;
  addAttend(type.value).then((res) => {
    console.log(res);
    if (res.t === 1) {
      selectAttend();
      clockInStatus.value = true
      clockOutStatus.value = false
      ElMessage.success('上班打卡成功');
    } else {
      ElMessage.error(res.message);
    }
  });
}

function clockOut() {
  type.value = 2;
  addAttend(type.value).then((res) => {
    console.log(res);
    if (res.t === 1) {
      selectAttend();
      handleClick();
      ElMessage.success('下班打卡成功');
    } else {
      ElMessage.error(res.message);
    }
  });
}

const handleClick = () => {
  // 禁用按钮
  clockOutStatus.value = true;
  ElMessage.success('10 秒后可再次点击');

  // 启动 10 秒定时器
  setTimeout(() => {
    // 恢复按钮状态
    clockOutStatus.value = false;
  }, 180000); // 三分钟
};

function selectAttend() {
  getAttend(startDate.value, endDate.value).then(res => {
    console.log(startDate.value);
    console.log(endDate.value);
    attendance.value = res.t;
    if (attendance.value[0].id !== empInfo!.id) {
      console.log(attendance.value);
      clockInStatus.value = true
      clockOutStatus.value = false
    } else {
      clockInStatus.value = false
      clockOutStatus.value = true
    }
    console.log(res);
    for (let i = 0; i < attendance.value.length; i++) {
      if (attendance.value[i].checkInTime === null || attendance.value[i].checkInTime === '') {
        attendance.value[i].checkInTime = '----';
      }
    }
  });
}

// 每天先查一下考勤
selectAttend()







const attendanceRecords = ref([
  {
    name: '张三',
    startTime: '8:40:33',
    endTime: '----',
  },
]);

const gotoRetroactive = () => {
  router.push('/retroactive');
};

onMounted(() => {
  timer = setInterval(() => {
    currentTime.value = new Date();
  }, 1000);
});

onUnmounted(() => {
  clearInterval(timer);
});

</script>

<style scoped>
.el-header {
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-nav {
  background-color: #333;
}

.sidebar {
  height: 100%;
}

.coming-soon {
  text-align: center;
  margin: 20px 0;
}

.timer {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.actions {
  margin: 20px 0;
  text-align: center;
}

.el-footer {
  text-align: center;
  padding: 10px 0;
  background-color: #f5f5f5;
}
</style>
